<template>
    <div>
        <!-- 证件认证 -->
        <pagetitle></pagetitle>
        <el-card v-if="info.certified <= 1 || isUpdate">
            <!-- <el-form ref="formRef" :model="pageData" :disabled="info.certified == '1' ? true : false" label-position="right" label-width="120px" class="demo-ruleForm"> -->
            <el-form ref="formRef" :model="pageData" label-position="right" label-width="120px" class="demo-ruleForm">
                <div class="certificate">
                    <div class="certificateTitle">申请个人认证</div>
                    <el-form-item label="真实姓名：">
                        <el-input v-model="pageData.name" class="forminput" placeholder="请输入名字"></el-input>
                    </el-form-item>
                    <el-form-item label="证件号码：">
                        <el-input v-model="pageData.idNum" class="forminput" placeholder="请输入证件号码"></el-input>
                    </el-form-item>
                </div>
                <div class="certificate">
                    <div class="certificateTitle">个人常驻或服务地址</div>
                    <el-form-item label="常驻地址：">
                        <addRess class="forminput" :value="pageData.addressArea.keyText" :key="pageData.addressArea.keyText" :getAreaData="getAreaData"></addRess>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="pageData.address" class="forminput" placeholder="请输入详细地址"></el-input>
                    </el-form-item>
                </div>
                <div class="certificate">
                    <div class="certificateTitle">个人身份证件</div>
                    <el-form-item label="上传个人证件：">
                        <div>
                            <div class="uploadcertificate">
                                <div class="uploadcertificateItem">
                                    <uploadFile :fileUrl="pageData.idFront" @callBack="uploadFiles" tableItem="idFront" width="274px" height="168px" :showIconOrText="false"></uploadFile>
                                    <div class="uploadcertificateTitle">证件正面照片</div>
                                </div>
                                <div class="uploadcertificateItem">
                                    <uploadFile :fileUrl="pageData.idBack" @callBack="uploadFiles" tableItem="idBack" width="274px" height="168px" :showIconOrText="false"></uploadFile>

                                    <div class="uploadcertificateTitle">证件背面照片</div>
                                </div>
                                <div class="uploadcertificateItem">
                                    <uploadFile :fileUrl="pageData.idInHand" @callBack="uploadFiles" tableItem="idInHand" width="274px" height="168px" :showIconOrText="false"></uploadFile>
                                    <div class="uploadcertificateTitle">手持证件照片</div>
                                </div>
                            </div>
                            <div class="certificateInputTip">● 图片格式要求jpg、jpeg、bmp、png不超过10M。</div>
                            <div class="certificateInputTip">● 可以添加“云上农场备案、服务申请、服务认证、服务备案”等水 印；但不能遮挡关键信息，例如姓名、证件号。</div>
                        </div>
                    </el-form-item>
                </div>
                <div class="certificate">
                    <sxnfbtn @click="authentication">{{ info.certified >= 1 ? "修改" : "申请" }}认证</sxnfbtn>
                </div>
            </el-form>
        </el-card>
        <el-card class="tip" v-if="info.certified == '2' && !isUpdate">
            <div class="box">
                <div class="left">
                    <img src="../../../assets/images/cg.png" alt="" srcset="" />
                    <div class="title">个人认证成功</div>
                    <div class="btns">
                        <sxnfbtn>开始团队认证</sxnfbtn>
                        <sxnfbtn @click="openUpdate">修改个人认证</sxnfbtn>
                    </div>
                </div>
                <div class="right">
                    <div class="title">您的认证信息</div>
                    <div class="item">
                        <div class="key">账号类型</div>
                        <div class="val">个人认证</div>
                    </div>
                    <div class="item">
                        <div class="key">证件类型</div>
                        <div class="val">中华人民共和国居民身份证</div>
                    </div>
                    <div class="item">
                        <div class="key">姓名</div>
                        <div class="val">{{ info.nickName ? nameAnalysis(info.nickName) : "" }}</div>
                    </div>
                    <div class="item">
                        <div class="key">证件号码</div>
                        <div class="val">{{ info.idNum ? phoneAnalysis(info.idNum) : "" }}</div>
                    </div>
                    <div class="item">
                        <div class="key">认证时间</div>
                        <div class="val">{{ info.updateTime }}</div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
import { ElMessage } from "element-plus";
import { submitAttestation, getUserInfo } from "@/api/user";
// const setCardType = (a: any) => {};
// const cardTypeIndex: any = ref("");

import { useStore } from "vuex";
const store = useStore();
const info: any = computed((e: any) => {
    return store.getters.userInfo;
});

const isUpdate = ref(false);
console.log(info.value);
// info.value.certified = 2;
const openUpdate = () => {
    isUpdate.value = true;
};
// const cardType = reactive([
//     {
//         label: "中国大陆居民身份证",
//         value: 1,
//     },
//     {
//         label: "护照",
//         value: 2,
//     },
//     {
//         label: "居住证",
//         value: 3,
//     },
// ]);
const pageData: any = reactive({
    idType: info.value.idType, // 证件类型
    idNum: info.value.idNum, // 身份证号码
    name: info.value.name, // 用户名
    idFront: info.value.idFront, // 身份证正面
    idBack: info.value.idBack, // 身份证背面
    idInHand: info.value.idInHand, // 身份证手持
    // headPortrait: "", // 头像
    addressArea: info.value.addressArea ? JSON.parse(info.value.addressArea) : { keyText: "" }, // 地址
    // addressCode: "", // 地址code
    address: info.value.address, // 详细地址
});

// 文件上传回调
const uploadFiles = (path: string, doc: string) => {
    // console.log(path, doc);
    pageData[doc] = path;
};

// 选择地址回调
const getAreaData = (data: any) => {
    // console.log(data);
    pageData.addressArea = data;
    // pageData.addressCode = data.keyText;
};

const authentication = () => {
    if (verifyData()) {
        // console.log(pageData);
        pageData.addressArea = JSON.stringify(pageData.addressArea);
        submitAttestation(pageData).then((res) => {
            ElMessage.success("提交成功，请等待管理员审核");
            getUserInfo().then((res: any) => {
                store.commit("setUserInfo", res.data);
                info.value = res.data;
            });
        });
    }
};
// 验证数据
const verifyData = () => {
    const data = pageData;
    // console.log(pageData);
    if (!data.name) {
        ElMessage.error("请填写姓名");
        return false;
    }
    if (!data.idNum) {
        ElMessage.error("请填写身份证号码");
        return false;
    }
    // if (!data.headPortrait) {
    //     ElMessage.error("请上传头像");
    //     return false;
    // }
    if (!data.addressArea) {
        ElMessage.error("请选择地址");
        return false;
    }
    if (!data.address) {
        ElMessage.error("请填写详细地址");
        return false;
    }
    if (!data.idFront) {
        ElMessage.error("请上传身份证正面");
        return false;
    }
    if (!data.idBack) {
        ElMessage.error("请上传身份证背面");
        return false;
    }
    if (!data.idInHand) {
        ElMessage.error("请上传身份证手持");
        return false;
    }
    return true;
};
const nameAnalysis = (name: any) => {
    if (!name) {
        return;
    }
    // console.log(name.split(""));
    const names = name.split("");
    let n = "";
    if (names.length > 2) {
        n = `${names[0]}*${names[names.length - 1]}`;
    } else {
        n = `${names[0]}*`;
    }
    return n;
};
const phoneAnalysis = (phone: any) => {
    if (!phone) {
        return;
    }
    const pn = phone.replace(/(\d{6})\d{8}(\d{4})/, "$1 **** **** $2");
    return pn;
};
</script>
<style lang="scss" scoped>
.certificate {
    // padding-left: 60px;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 30px;
    &:last-child {
        border: none;
    }
    .certificateTitle {
        // color: #333333;
        // font-size: 18px;
        // margin-bottom: 30px;
        // font-weight: 500;
        font-size: 14px;
        font-weight: bold;
        color: #252b3a;
        margin-bottom: 30px;
    }
    .forminput {
        width: 500px;
    }
    .uploadcertificate {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        // margin-bottom: 10px;
        .uploadcertificateItem {
            margin-right: 20px;
            background-repeat: no-repeat;
            background-size: 208px 132px;
            background-position: 50% 18%;
            &:nth-child(1) {
                background-image: url(@/assets/image/card2.png);
            }
            &:nth-child(2) {
                background-image: url(@/assets/image/card1.png);
            }
            &:nth-child(3) {
                background-image: url(@/assets/image/card3.png);
            }
            .uploadcertificateTitle {
                text-align: center;
                font-size: 14px;
                color: #333333;
                margin-top: 20px;
                margin-bottom: 25px;
            }
        }
    }
    .certificateInputTip {
        font-size: 12px;
        color: #666666;
        line-height: 24px;
        &:last-child {
            margin-bottom: 30px;
        }
    }
    .certificateBtn {
        width: 88px;
        height: 40px;
        background: rgba(41, 156, 55, 0.8);
        border-radius: 5px;
        color: #ffffff;
        font-size: 14px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
    }
}
.tip {
    padding-top: 10px;
    padding-bottom: 20px;
    // min-height: calc(100vh - 135px);
    padding-left: 80px;
    .box {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .left {
            padding-right: 100px;
            text-align: center;
            img {
                width: 80px;
                margin-bottom: 20px;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
            }
            .title {
                font-size: 24px;
                margin-bottom: 20px;
            }
            .btns {
                display: flex;
                justify-content: center;
                align-items: center;
                white-space: nowrap;
            }
        }
        .right {
            padding-left: 60px;
            border-left: 1px solid #cccccc;
            .title {
                font-weight: bold;
                font-size: 16px;
                margin-bottom: 20px;
            }
            .item {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-bottom: 15px;
                &:last-child {
                    margin-bottom: 0;
                }
                .key {
                    width: 95px;
                    text-align: left;
                    font-size: 14px;
                    color: #999999;
                }
                .val {
                    font-size: 14px;
                    color: #252b3a;
                }
            }
        }
    }
}
</style>
